<template>
    <div class="marked">
        <el-button type="primary" class="marked__mar10 marked__primary" @click="save">发布文章</el-button>
        <el-input v-model="name" placeholder="请输入标题" class="from-input__w--1"></el-input>
        <el-select v-model="value" placeholder="请选择标签" class="from-select__marlf--6">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <div class="marked__box">
            <el-input
                type="textarea"
                placeholder="请输入内容"
                resize="none"
                v-model="input">
            </el-input>
            <div class="marked__cont">
                <div v-if="input.length" v-html="compiledMarkdown" v-highlight></div>
            </div>
        </div>
    </div>
</template>

<script>
    import marked from 'marked'
    import axios from 'axios'

    export default {
        data(){
            return {
                input: '',
                name: '',
                value: '',
                options: [
                    {
                        value: '0',
                        label: '不选择'
                    },
                    {
                        value: '1',
                        label: 'less'
                    },
                    {
                        value: '2',
                        label: '前端'
                    },
                    {
                        value: '3',
                        label: 'JAVASRICT'
                    },
                    {
                        value: '4',
                        label: '后端'
                    },
                    {
                        value: '5',
                        label: 'Flex'
                    },
                    {
                        value: '6',
                        label: '其他'
                    },
                ]
            }
        },

        mounted() {

        },

        computed: {
            compiledMarkdown: function () {
                return marked(this.input);
            }
        },

        filters:{

        },

        methods: {
            // 发布
            save(){
                // 获取标题，标签，内容
                let param = {
                    "body": {
                        title: this.name,
                        content: this.input,
                        tagType: this.value || 0,
                        date: new Date().getTime().toString()
                    }
                };
                        
                axios({
                    method: "post",
                    url: "/api/article",
                    headers: {'Content-Type': 'application/json'},
                    data: {
                        data: JSON.stringify(param)
                    }
                }).then((res)=>{
                    console.log(res);
                    let {data} = res;
                    if(data.code == 200) {
                        let self = this;
                        this.$message({
                            message: data.msg,
                            type: 'success',
                            onClose(){
                                self.$router.push({path: '/'});
                            }
                        });
                    }
                }).catch((err)=>{
                    console.log(err)
                })
            }
        },
    }
</script>

<style lang="less">
    .marked {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
        background: #fff;
        width: 100%;
        text-align: left;
        &__box {
            display: flex;
            justify-content: flex-start;
            margin-top: 10px;
            .el-textarea {
                width: 50%;
                margin-right: 10px;
            }
            .el-textarea__inner {
                height: 800px;
            }
        }
        &__cont {
            width: 50%;
            flex: 1;
            padding: 10px;
            text-align: left;
            border: 1px solid #DCDFE6;
            max-height: 800px;
            overflow-y: scroll;
        }
        &__mar10 {
            margin-bottom: 10px;
        }
        &__primary {
            width: 100%;
        }
    }
    .from-input {
        &__w {
            &--1 {
                width: 50%;
            }
        }
    }
    .from-select {
        &__marlf--6 {
            margin-left: 6px;
        }
    }
</style>

